<template>
	<div class="nearCompany">
		<NewsHeader 
			:isInput="dataArr.isInput" 
			:iconArr="dataArr.iconArr" 
			:placeholder="dataArr.placeholder" 
			:aimUrl = 'dataArr.aimUrl'
			:rightUrl='dataArr.rightUrl'
		/>
		<div class="nearCompanyCont">
			<div class="nearCompanyDetail">
				<p><span>工作地点</span></p>
				<p>
					<img src="../../assets/images/shouye/dinwei_03.png" alt="">
				</p>
				<p>
					<span>交通方式</span>
				</p>
				<ul>
					<li>
						<i class="iconfont icon-gongjiaoche nearCompanyActive"></i>
						<span>公交车</span>
					</li>
					<li>
						<i class="iconfont icon-jiache"></i>
						<span>驾车</span>
					</li>
					<li>
						<i class="iconfont icon-buxing"></i>
						<span>步行</span>
					</li>
					<li>
						<i class="iconfont icon-qixing2"></i>
						<span>骑行</span>
					</li>
				</ul>
				<p>
					<span>交通时间</span>
					<span>
						<img src="../../assets/images/shouye/15_06.png" alt="">
						<img src="../../assets/images/shouye/30_05.png" alt="">
						<img src="../../assets/images/shouye/60_07.png" alt="">
						<img src="../../assets/images/shouye/90_09.png" alt="">
					</span>
				</p>
				<p>
					<span>立即找房</span>
				</p>
			</div>
		</div>
	</div>
</template>
<script>
import NewsHeader from '../../components/shopheader'
	export default{
		name:'nearCompany',
		components:{
			NewsHeader
		},
		data(){
			return{
				dataArr:{
					isInput:false,
					iconArr:[
						{
							iconLeft:"icon-zuojiantou",
							iconRight:""
						}
					],
					placeholder:"",
					aimUrl:'/homecurrent',
					rightUrl:''
				},
			}
		}
	}
</script>
<style scoped lang="less">
.nearCompany{
	width: 100%;
	height: 1334 / 100rem;
	background-color: #ededed;
	padding-top: 88 / 100rem;
	box-sizing: border-box;
	.nearCompanyCont{
		// margin-top: 88 / 100rem;
		width: 100%;
		height: 200px;
		padding: 0 25 / 100rem;
		box-sizing: border-box;
		.nearCompanyDetail{
			margin-top: 60 / 100rem;
			width: 100%;
			height: 961 / 100rem;
			border-radius: 6 / 100rem;
			box-shadow: 0 0 14 / 100rem 14 / 100rem rgba(255, 255, 255, 0.3);
			background-color: #fff;
			text-align: center;
			p:nth-child(1){
				padding-top: 48 / 100rem;
				padding-bottom: 35 / 100rem;
				box-sizing: border-box;
				span{
					font-size: 26 / 100rem;
					font-weight: 600;
					color: #363636;
				}
			}
			p:nth-child(2){
				height: 80 / 100rem;
				text-align: center;
				border: none;
				img{
					width: 80 / 100rem;
					height: 80 / 100rem;
					border-radius: 50%;
				}
				
			}
			p:nth-child(3){
				padding-top: 59 / 100rem;
				padding-bottom: 62 / 100rem;
				box-sizing: border-box;
				span{
					font-size: 26 / 100rem;
					font-weight: 600;
					color: #363636;
				}
			}
			ul:nth-child(4){
				width: 100%;
				height: 121 / 100rem;
				padding:0 68 / 100rem;
				box-sizing: border-box; 
				li{
					width: 80 / 100rem;
					height: 121 / 100rem;
					float: left;
					i{
						display:inline-block;
						font-size: 80 / 100rem;
						color: #ababa8;
					}
					.nearCompanyActive{
						color: #ff5555;
					}
					span{
						display: block;
						margin-top: 17 / 100rem;
						font-size: 24 / 100rem;
						color: #5c5c5c;
					}
				}
				li:nth-child(2){
					margin-left: 82 / 100rem;
					margin-right: 82 / 100rem;
				}
				li:nth-child(4){
					margin-left: 80 / 100rem;
				}
				
			}
			p:nth-child(5){
				padding-top: 65 / 100rem;
				padding-bottom: 113 / 100rem;
				box-sizing: border-box;
				span{
					font-size: 26 / 100rem;
					font-weight: 600;
					color: #363636; 
				}
				span:nth-child(2){
					display: block;
					width: 100%;
					height: 80 / 100rem;
					padding:0 68 / 100rem;
					box-sizing: border-box;
					text-align: left; 
					margin-top: 62 / 100rem;
					img{
						display: inline-block;
						width: 80 / 100rem;
						height: 80 / 100rem;
						border-radius: 50%;
					}
					img:nth-child(2){
						margin-left: 72 / 100rem;
						margin-right: 72 / 100rem;
					}
					img:nth-child(4){
						margin-left: 72 / 100rem;
					}
				}
			}
			p:nth-child(6){
				span{
					display: inline-block;
					width:558 / 100rem;
					height: 80 / 100rem;
					background-color: #ff5555;
					border-radius: 6 / 100rem;
					text-align: center;
					line-height:80 / 100rem;
					color: #fff;
					font-size: 28 / 100rem;
					font-weight: 700;  
				}
			}
		}
	}
}	
</style>